<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <el-row class="header navbar shadow">
        <div class="btn-group tool-button mt5">
            <el-select
                    v-model="pageForm.currencyId"
                    filterable
                    reserve-keyword
                    placeholder="选择币种"
                    :loading="loading">
                <el-option
                        v-for="item in currencies"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </div>
        <div class="btn-group tool-button mt5">
            <el-input placeholder="按用户名、昵称搜索" v-model="pageForm.key" @keyup.enter.native="doSearch">
                <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
            </el-input>
        </div>
        <div class="btn-group tool-button mt5">
            <el-checkbox v-model="isInside">不统计内部账号</el-checkbox>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table
                :data="tableData"
                @sort-change='pageOrder'
                size="small"
                :summary-method="getSummaries"
                border
                show-summary
                header-align="center"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :default-sort="{prop: 'totalBalance', order: 'descending'}"
        >

            <el-table-column
                    label="用户昵称"
                    header-align="center"
                    prop="nickName"
                    align="center"
                    :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column
                    label="用户名"
                    header-align="center"
                    prop="userName"
                    align="center"
                    :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column
                    label="总额$(约等于)"
                    sortable
                    header-align="center"
                    prop="totalBalance"
                    align="center"
                    :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column
                    label="币种"
                    header-align="center"
                    prop="currencyName"
                    align="center"
                    :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column
                    label="币种金额"
                    sortable
                    header-align="center"
                    prop="balance"
                    align="center"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <!--            <el-table-column-->
            <!--                    sortable-->
            <!--                    label="最后变更时间"-->
            <!--                    header-align="center"-->
            <!--                    align="center"-->
            <!--                    prop="opAt">-->
            <!--                <template slot-scope="scope">-->
            <!--                    {{formatAt(scope.row.opAt)}}-->
            <!--                </template>-->
            <!--            </el-table-column>-->
        </el-table>
    </el-row>
    <el-row class="el-pagination-container">
        <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageNumberChange"
                :current-page="pageForm.pageNumber"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.totalCount">
        </el-pagination>
    </el-row>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                selectData: [],
                pageForm: {
                    key: "",
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                    pageOrderName: "totalBalance",
                    conditionData: "",
                    pageOrderBy: "desc"
                },
                tableData: [],
                options: [],
                currencies: [],
                isInside: true,
                loading: false
            }
        },
        methods: {
            // 按金额排序
            pageOrder: function (column) {
                this.pageForm.pageNumber = 1;
                this.pageForm.pageOrderName = column.prop;
                // 按金额排序查询所有的用户，要清空搜索关键字
                this.pageForm.key = '';
                // 如果是按总额排序，不按币种查询
                if (column.prop === 'totalBalance') {
                    this.pageForm.currencyId = '';
                }
                //
                if (column.order) {
                    this.pageForm.pageOrderBy = column.order.replace("ending", "");
                    this.pageData();
                }
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                self.pageForm.conditionData = "";
                if (self.isInside) {
                    if (self.pageForm.conditionData === "") {
                        self.pageForm.conditionData = "isInside";
                    } else {
                        self.pageForm.conditionData = self.pageForm.conditionData + ",isInside";
                    }
                }
                $.post(base + "/platform/user/account/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code === 0) {
                        self.tableData = data.data.pagination.list;
                        self.sum = data.data.sum;
                        self.pageForm.totalCount = data.data.pagination.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            getSummaries(param) {
                const {columns, data} = param;
                const sums = [];
                sums[1] = '合计USD';
                sums[2] = this.sum;
                return sums;
            },
            doSearch: function (type) {
                this.pageForm.pageNumber = 1;
                this.pageData(type);
            },
            formatAt: function (val) {
                if (val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            handleSelectionChange: function (val) {
                this.selectData = val;
            },
            getCurrencies: function () {
                var _this = this;
                $.post(base + "/platform/sys/currency/list", function (data) {
                    _this.currencies = data.data.map(ite => {
                        ite.name = ite.name + "(" + ite.rate + ")";
                        return ite;
                    });
                    _this.currencies.push({
                        id: '',
                        name: '全部币种'
                    });
                }, "json");
            }
        },
        created: function () {
            this.pageData();
            this.getCurrencies();
        }
    });
</script>
<!--#
}
#-->